import './App.css';
import React, {useState} from 'react';

function App() {
    const modelData = JSON.parse(document.getElementById('root').getAttribute(':model-data'));

    const femaleGuests = modelData.femaleGuests;

    const [guests, setGuests] = useState(femaleGuests);

    const toggleLight = (index) => {
        const updatedGuests = [...guests];
        updatedGuests[index].isLit = !updatedGuests[index].isLit;
        setGuests(updatedGuests);
    };

    return (
        <div className="guest-list">
            {guests.map((guest, index) => (
                <div
                    key={index}
                    className={`guest-card ${guest.isLit ? 'lit' : ''}`}
                    onClick={() => toggleLight(index)}
                >
                    <h2>{guest.name}</h2>
                    <p>Height: {guest.height} cm</p>
                    <p>Weight: {guest.weight} kg</p>
                    <p>Educational: {guest.educational}</p>
                    <p>Income: ${guest.income}</p>
                </div>
            ))}
        </div>
    );
}

export default App;
